{extend name="public:layout" /}
{block name="title"}首页{/block}
{block name="head"}
<style>
    body{background:#e8e8e8;}
    .center .boxes .box{text-align: center; border: 1px solid #ccc;}
    .center .boxes .box .weui-grid__icon img{width: 35px;}
    .center .boxes .box p{margin: 0;}
</style>
{/block}
{block name="body"}
<div class="top-info-box">
    <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{"animation":"slide","animationLoop":false,"itemWidth":120,"itemMargin":5}' >
        <ul class="am-slides">
            <li>
                <div class="info-item">
                    新增线索
                    <span class="num">60</span>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="info-item">
                    新增上级
                    <span class="num">12</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="info-item">
                    新增客户
                    <span class="num">5</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="info-item">
                    本周销售额
                    <span class="num">100000.00</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="info-item">
                    任务完成度
                    <span class="num">30%</span>
                </a>
            </li>
        </ul>
    </div>

</div>
<div class="lattice-9">
    <a class="item" href="javascript:;">
        <div class="corner">
            <span class="num">9</span>
        </div>
        <span class="iconfont icon-Fill"></span>
        <div class="text">待办事项</div>
    </a>
    <a class="item" href="{:url('home/Index/index',['folder'=>'leads','file'=>'add'])}">
        <span class="iconfont icon-xinzeng"></span>
        <div class="text">新增线索</div>
    </a>
    <a class="item" href="javascript:;" id="voice">
        <div class="corner">
            <span class="num">9</span>
        </div>
        <span class="iconfont icon-yuyin"></span>
        <div class="text">语音备注</div>
    </a>
    <a class="item" href="javascript:;">
        <span class="iconfont icon-mingpian"></span>
        <div class="text">扫描名片</div>
    </a>
    <a class="item" href="{:url('home/Index/index',['folder'=>'leads','file'=>'list','leads_status'=>1])}">
        <span class="iconfont icon-mubiao"></span>
        <div class="text">线索管理</div>
    </a>
    <a class="item" href="{:url('home/Index/index',['folder'=>'business','file'=>'list'])}">
        <span class="iconfont icon-shangji"></span>
        <div class="text">商机管理</div>
    </a>
    <a class="item" href="{:url('home/Index/index',['folder'=>'customer','file'=>'list'])}">
        <span class="iconfont icon-kehu1"></span>
        <div class="text">客户管理</div>
    </a>
    <a class="item" href="javascript:;">
        <span class="iconfont icon-renwujihua"></span>
        <div class="text">新增订单</div>
    </a>
    <a class="item" href="javascript:;">
        <span class="iconfont icon-dingdan1"></span>
        <div class="text">订单管理</div>
    </a>
    <a class="item" href="javascript:;">
        <span class="iconfont icon-jiedian"></span>
        <div class="text">订单节点</div>
    </a>
    <a class="item" href="javascript:;">
        <span class="iconfont icon-cw"></span>
        <div class="text">财务回款</div>
    </a>
    <a class="item" href="javascript:;">
        <span class="iconfont icon-tubiaozhexiantu"></span>
        <div class="text">统计图表</div>
    </a>
</div>
<div class="no-msg">
    <span class="iconfont icon-Fill"></span>
    <div class="text">
        没有相关的线索信息
    </div>
</div>
<!--列表-->
<div class="app-list">
    <ul class="am-avg-sm-3 list-tab">
        <li class="item"><a href="" class="link active">近7日跟进</a></li>
        <li class="item"><a href="" class="link">本周新增</a></li>
        <li class="item"><a href="" class="link">全部线索</a></li>
    </ul>
    <ul class="leads-list">
        <li class="item">
            <a href="" class="link"></a>
            <div class="thumb">
                <span class="surname bg-color1">柴</span>
            </div>
            <div class="info-box">
                <h2 class="name">柴云<span class="sex">先生</span></h2>
                <span class="mobile">联系电话：13096635151</span>
                <p class="info">录入时间：2017-11-13 跟进：23次<br>最近跟进：2017-11-20 跟进人:柴赟</p>
            </div>
            <div class="action-box">
                <a href="javascript:;" class="action-link">
                    <span class="iconfont icon-iconfontphone"></span>
                </a>
                <a href="javascript:;" class="action-link">
                    <span class="iconfont icon-add"></span>
                </a>
            </div>
        </li>
        <li class="item">
            <a href="" class="link"></a>
            <div class="thumb">
                <span class="surname bg-color1">柴</span>
            </div>
            <div class="info-box">
                <h2 class="name">柴云<span class="sex">先生</span></h2>
                <span class="mobile">联系电话：13096635151</span>
                <p class="info">录入时间：2017-11-13 跟进：23次<br>最近跟进：2017-11-20 跟进人:柴赟</p>
            </div>
            <div class="action-box">
                <a href="javascript:;" class="action-link bg-color3">
                    <span class="iconfont icon-iconfontphone"></span>
                </a>
                <a href="javascript:;" class="action-link bg-color1">
                    <span class="iconfont icon-add"></span>
                </a>
            </div>
        </li>
        <li class="item">
            <a href="" class="link"></a>
            <div class="thumb">
                <span class="surname bg-color1">柴</span>
            </div>
            <div class="info-box">
                <h2 class="name">柴云<span class="sex">先生</span></h2>
                <span class="mobile">联系电话：13096635151</span>
                <p class="info">录入时间：2017-11-13 跟进：23次<br>最近跟进：2017-11-20 跟进人:柴赟</p>
            </div>
            <div class="action-box">
                <a href="javascript:;" class="action-link bg-color3">
                    <span class="iconfont icon-iconfontphone"></span>
                </a>
                <a href="javascript:;" class="action-link bg-color1">
                    <span class="iconfont icon-add"></span>
                </a>
            </div>
        </li>
        <li class="item">
            <a href="" class="link"></a>
            <div class="thumb">
                <span class="surname bg-color1">柴</span>
            </div>
            <div class="info-box">
                <h2 class="name">柴云<span class="sex">先生</span></h2>
                <span class="mobile">联系电话：13096635151</span>
                <p class="info">录入时间：2017-11-13 跟进：23次<br>最近跟进：2017-11-20 跟进人:柴赟</p>
            </div>
            <div class="action-box">
                <a href="javascript:;" class="action-link bg-color3">
                    <span class="iconfont icon-iconfontphone"></span>
                </a>
                <a href="javascript:;" class="action-link bg-color1">
                    <span class="iconfont icon-add"></span>
                </a>
            </div>
        </li>
    </ul>
</div>
<!--线索详情头部-->
<div class="leads-info-box">
    <div class="info-box">
        <div class="thumb">
            <img src="/public/home/plugins/crm_app/img/head_img/head_img_01.png" alt="">
        </div>
        <h2 class="name">柴云<span class="sex">先生</span></h2>
        <span class="mobile">联系电话：13096635151</span>
        <p class="info">录入时间：2017-11-13 跟进：23次<br>最近跟进：2017-11-20 跟进人:柴赟</p>
    </div>
    <div class="action-box">
        <ul class="am-avg-sm-3">
            <li>
                <a href="javascript:;" class="action-link bg-color1">
                    <span class="iconfont icon-iconfontphone"></span> 拨打电话
                </a>
            </li>
            <li>
                <a href="javascript:;" class="action-link bg-color2">
                    <span class="iconfont icon-xinzeng"></span> 跟进记录
                </a>
            </li>
            <li>
                <a href="javascript:;" class="action-link bg-color3">
                    <span class="iconfont icon-shangji"></span> 升级为商机
                </a>
            </li>
        </ul>
    </div>
</div>
<!--时间轴-->
<ul class="timeline">
    <li class="item">
        <div class="time-box">
            <span class="date">2017/11/12</span>
            <span class="time">14:28</span>
            <span class="node"></span>
        </div>
        <div class="item-main">
            <div class="info-box">
                <h2 class="info-title">跟进标题 <span class="sub">跟进人：柴云</span></h2>
                <p class="info">
                    这里是跟进内容
                </p>
                <div class="sound-box"></div>
                <div class="action-box"><a href="javascript:;" class="comment"><i class="iconfont icon-crmtubiao25"></i> 评论</a></div>
                <div class="comment-item">
                    <h2 class="comment-title">某某某 于 2017年12月01日评论</h2>
                    <p class="comment-info">这里是评论的内容，线索是所有人都可以跟进记录，也可以进行评论。</p>
                </div>
                <div class="comment-item">
                    <h2 class="comment-title">某某某 于 2017年12月01日评论</h2>
                    <p class="comment-info">这里是评论的内容，线索是所有人都可以跟进记录，也可以进行评论。</p>
                </div>
            </div>
        </div>
    </li>
    <li class="item">
        <div class="time-box">
            <span class="date">2017/11/12</span>
            <span class="time">14:28</span>
            <span class="node"></span>
        </div>
        <div class="item-main">
            <div class="info-box">
                <h2 class="info-title">跟进标题 <span class="sub">跟进人：柴云</span></h2>
                <p class="info">
                    这里是跟进内容
                </p>
                <div class="sound-box"></div>
                <div class="action-box"><a href="javascript:;" class="comment"><i class="iconfont icon-crmtubiao25"></i> 评论</a></div>
            </div>
        </div>
    </li>

</ul>
<!--表单-->
<div class="app-form2">
    <form class="am-form app-form-line">
        <fieldset>
            <legend>表单标题</legend>
            <div class="am-form-group">
                <label for="doc-ipt-email-1" class="tit">单行文本</label>
                <input type="text" class="input-text" id="doc-ipt-email-1" placeholder="请输入单行文本">
            </div>
            <div class="am-form-group">
                <label for="doc-ta-1" class="tit">多行文本</label>
                <textarea class="textarea-text" rows="5" id="doc-ta-1" placeholder="请输入多行文本"></textarea>
            </div>
            <div class="am-form-group">
                <label class="tit">地理位置</label>
                <input type="text" class="input-text" name="address" placeholder="请输入单行文本">
                <a href="javascript:;" onclick="mapLocation(this)" data-name="address" class="action-icon">
                    <i class="iconfont icon-weizhi"></i>
                </a>
            </div>
            <div class="am-form-group">
                <label class="tit">地图微调</label>
                <input type="text" class="input-text" name="address2" placeholder="请输入单行文本">
                <a href="javascript:;" onclick="myLocation(this)" data-name="address2" class="action-icon">
                    <i class="iconfont icon-weizhi"></i>
                </a>
            </div>
            <div class="am-form-group">
                <label class="tit">日期选择</label>
                <input type="text" class="am-form-field input-text" placeholder="请选择日期时间" onclick="timeBox(this)" readonly required />
            </div>
            <div class="am-checkbox">
                <label class="tit">复选</label>
                <label class="checkbox">
                    <input type="checkbox"> 复选框，选我选我选我
                </label>
            </div>
            <div class="am-form-group checkbox-box">
                <label class="tit">单选</label>
                <label class="am-radio-inline radio">
                    <input type="radio"  value="" name="docInlineRadio"> 每一分
                </label>
                <label class="am-radio-inline radio">
                    <input type="radio" name="docInlineRadio"> 每一秒
                </label>
                <label class="am-radio-inline radio">
                    <input type="radio" name="docInlineRadio"> 多好
                </label>
            </div>
            <div class="am-form-group checkbox-box">
                <label class="tit">复选</label>
                <label class="am-checkbox-inline">
                    <input type="checkbox" value="option1"> 选我
                </label>
                <label class="am-checkbox-inline">
                    <input type="checkbox" value="option2"> 同时可以选我
                </label>
                <label class="am-checkbox-inline">
                    <input type="checkbox" value="option3"> 还可以选我
                </label>
            </div>
            <div class="am-form-group">
                <label for="doc-select-1" class="tit">下拉框</label>
                <select id="doc-select-1" class="select">
                    <option value="option1">选项一...</option>
                    <option value="option2">选项二.....</option>
                    <option value="option3">选项三........</option>
                </select>
                <span class="am-form-caret"></span>
            </div>
            <div class="am-form-group am-form-file">
                <label class="tit">文件上传</label>
                <div class="upload-file-box" id="file">
                    <div class="file-item">
                        <span class="iconfont file-icon icon-doc"></span>
                        这里是文件名称部分.doc
                        <a href="javascript:;" class="del-file"><i class="iconfont icon-shanchu11"></i></a>
                    </div>
                    <div class="file-item">
                        <span class="iconfont file-icon icon-pdf"></span>
                        这里是文件名称部分.pdf
                        <a href="javascript:;" class="del-file"><i class="iconfont icon-shanchu11"></i></a>
                    </div>
                    <div class="file-item">
                        <span class="iconfont file-icon icon-zip"></span>
                        这里是文件名称部分.zip
                        <a href="javascript:;" class="del-file"><i class="iconfont icon-shanchu11"></i></a>
                    </div>
                </div>
                    <a class="am-btn am-btn-default am-btn-sm upload-file" href="javascript:;" data-spaceId="152323625" data-id="file" onclick="uploadFile(this)">
                        <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                    </a>
                <input type="hidden" name="file">
            </div>
            <div class="am-form-group am-form-file">
                <label class="tit">多图上传</label>
                <div class="upload-img-box" id="single_imgs">
                    <a href="javascript:;" class="upload-img"  onclick="moreImg('single_imgs',3)"></a>
                </div>
                <input type="hidden" name="single_imgs">

            </div>
            <div class="am-form-group am-form-file">
                <label class="tit">单图上传</label>
                <div class="upload-img-box">
                    <a href="javascript:;" class="upload-img" id="single_img" onclick="single('single_img')"></a>
                    <input type="text" name="single_img">
                </div>
            </div>
            <div class="am-form-group am-form-file">
                <label class="tit">语音备注</label>
                <div class="form-sound-box">
                    <!--开始录音-->
                    <a href="javascript:;" class="star-sound" onclick="recordStar(this)">
                        <span class="iconfont icon-yuyin sound-record"></span>
                        <span class="text">点击按钮开始录音</span>
                    </a>
                    <!--录制中-->
                    <div class="recording">
                        <svg class="symbol_icon" aria-hidden="true">
                            <use xlink:href="#icon-yinpin"></use>
                        </svg>
                        <div class="progress">
                            <strong class="progress-time">60</strong>秒
                            <div class="progress-bar"></div>
                        </div>
                        <a href="javascript:;" class="iconfont icon-tingzhi1 stop" onclick="recordStop(this)"></a>
                    </div>
                    <div class="play-box">
                        <span class="iconfont icon-yinpinbofang play"></span>
                        <span class="text">点击播放/暂停</span>
                        <a href="javascript:;" class="am-btn am-btn-default am-btn-xs">语音转文字</a>
                    </div>
                </div>
            </div>
            <div class="am-form-group">
                <label for="doc-ta-5" class="tit">语音转文字</label>
                <textarea class="textarea-text" rows="5" id="doc-ta-5" placeholder="请输入多行文本"></textarea>
            </div>
            <div class="submit-box">
                <button type="button"  class="am-btn am-btn-block  am-radius am-btn-xl am-btn-primary">立即提交</button>
                <a href="/home/public/clearcookie"  class="am-btn am-btn-block  am-radius am-btn-xl am-btn-primary">退出登录</a>
            </div>
        </fieldset>
    </form>
</div>
{/block}
{block name="script"}
<script>
    /*开始录音*/
    function recordStar(obj) {
        var recording=$(obj).parents('.form-sound-box').find('.recording');
        $(obj).hide();
        recording.show().find('.progress-bar').addClass('progress-animation');
        var time=recording.find('.progress-time');
        progress(time);
    }
    /*倒计时*/
    function progress(obj,status){
        var times = 60 * 100; // 60秒
        console.log(status);
        if(status==0){
            clearInterval(countTime);
        }else{
            countTime = setInterval(function() {
                times = --times < 0 ? 0 : times;
                var ms = Math.floor(times / 100).toString();
                if(ms.length <= 1) {
                    ms = "0" + ms;
                }
                if(times == 0) {
                    obj.html('录音结束');
                    clearInterval(countTime);
                }
                // 获取分钟、毫秒数
                obj.html(ms);
            }, 10);
        }
    }
    /*结束录音*/
    function recordStop(obj){
        var recording=$(obj).parents('.recording');
        recording.find('.progress-bar').addClass('pause');
        var time=recording.find('.progress-time');
        progress(time,0);
    }
</script>

{/block}